﻿@{
    ViewBag.Title = "Games";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="first">
    <div class="second" style="margin-left: 15.0em; width: 1090px;">
        <table id="marbleTable" class="table">
            <thead>
                <th class="headerCol" hidden>ID</th>
                <th class="headerCol" style="top: 24px;">Name</th>
                <th>Description</th>
                <th>Game Profile</th>
                <th hidden>Game Profile ID</th>
                <th>Game Profile Normal Price</th>
                <th>Game Profile VIP Price</th>
                <th>Normal Price</th>
                <th>VIP Price</th>
                <th>Repeat Play Discount %</th>
                <th>Game Company Name</th>
                <th>Notes</th>
                <th>Last UpdatedDate</th>
                <th>Last UpdatedBy</th>
            </thead>
            @foreach (var item in ViewBag.games)
            {  
                <tr onchange="UpdatedList(this)">
                    <td class="headerCol" hidden>@item.Id  </td>
                    <td class="headerCol">
                        <input type="text" value="@item.Name" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="@item.Description" class="gridText" />
                    </td>
                    <td>
                        <select name="gameProfiles" id="gameProfile" onchange="onProfileChange(this)" class="gridText">
                            @foreach (var dow in item.GameProfiles)
                            {
                                if (@item.GameProfile == @dow.Id)
                                {
                                <option value="@dow.Name" selected>@dow.Name</option>
                                }
                                else
                                {
                                <option value="@dow.Name">@dow.Name</option>
                                }
                            }
                        </select>
                    </td>
                    
                    <td hidden>
                        <input type="text" value="" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="" class="gridText" disabled />
                    </td>
                    <td>
                        <input type="text" value="" class="gridText" disabled />
                    </td>
                    <td>
                        <input type="text" value="@item.NormalPrice" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="@item.VIPPrice" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="@item.RepeatPlayDiscountPercentage" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="@item.GameCompanyName" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="@item.Notes" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="@item.LastUpdatedDate" class="gridText" disabled/>
                    </td>
                    <td>
                        <input type="text" value="@item.LastUpdatedBy" class="gridText" disabled/>
                    </td>

                </tr>  
            }
        </table>
    </div>
</div>
<div class="action">
    <button class="btn btn-primary btn-md" role="button" onclick="SaveGames()">Save</button>
    <a href="#" class="btn btn-primary btn-md" role="button" onclick="AddGame()">Add</a>
</div>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
    $(document).ready(function () {
        $('.dropdown-toggle').collapse({
            toggle: false
        });
    })
    var myJsVariable = @Html.Raw(Json.Encode(ViewBag.games[0].GameProfiles));
    function AddGame() {
        var gameProfiles = '';
              @foreach (var dow in ViewBag.games[0].GameProfiles)
              {
                 @: gameProfiles = gameProfiles + '<option value="@dow.Name">@dow.Name</option>';
              }
        gameProfiles = gameProfiles + '</select></td>';

        var newRow = '<tr onchange=UpdatedList(this)> ' +
        '<td class="headerCol" hidden> <a href="#"></a> </td> ' +
        '<td class="headerCol"> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <select name="gameProfiles" id="gameProfile">' + gameProfiles +
        '<td> <input type="text" value="" class="gridText" hidden/>  </td>' +
        '<td> <input type="text" value="" class="gridText" disabled/>  </td>' +
        '<td> <input type="text" value="" class="gridText" disabled/>  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" disabled />  </td>' +
        '<td> <input type="text" value="" class="gridText" disabled />  </td>' + '</tr>';
        $('#marbleTable tr:last').after(newRow);
    }
    function onProfileChange(element) {
        for (var i = 0; i < myJsVariable.length; i++) {
            if (element.value == myJsVariable[i].Name) {
                element.parentElement.parentElement.cells[4].children[0].value = myJsVariable[i].Id;
                element.parentElement.parentElement.cells[5].children[0].value = myJsVariable[i].NormalPrice;
                element.parentElement.parentElement.cells[6].children[0].value = myJsVariable[i].VIPPrice;
            }
        }
    }
    function SaveGames() {
        var games = [];
        var table = document.getElementById('marbleTable');
        for (var r = 1, n = table.rows.length; r < n; r++) {
            if (updatedArray.includes(r)) {
                games.push({
                    Id: table.rows[r].cells[0].innerHTML,
                    Name: table.rows[r].cells[1].children[0].value,
                    Description: table.rows[r].cells[2].children[0].value,
                    GameProfile: table.rows[r].cells[4].children[0].value,
                    NormalPrice: table.rows[r].cells[7].children[0].value,
                    VIPPrice: table.rows[r].cells[8].children[0].value,
                    RepeatPlayDiscountPercentage: table.rows[r].cells[9].children[0].value,
                    GameCompanyName: table.rows[r].cells[10].children[0].value,
                    Notes: table.rows[r].cells[11].children[0].value,
                });
            }
        }
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("UpdateGames", "Game")',
            data: JSON.stringify({ games: games }),
            dataType: "json",
            success: function (data) {
                alert('Data Saved');
                location.reload();
            },
            error: function (e) {
                alert(e);
            }
        });
    }
    var updatedArray = [];
    function UpdatedList(x) {
        if (!updatedArray.includes(x.rowIndex)) {
            updatedArray.push(x.rowIndex);
        }
    }
    function ConfigureGame() {

    }
</script>
